import { defineComponent, ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Result, Button } from "ant-design-vue";
import styles from "./error/index.module.scss";

export default defineComponent({
  name: "ErrorPage",
  setup() {
    const router = useRouter();
    const route = useRoute();
    const status = ref("404");

    onMounted(() => {
      const result = new URLSearchParams(route.query as any);
      status.value = String(result.get("status") || "404");
    });

    const goHome = () => {
      router.replace("/");
    };

    return () => (
      <Result
        status="404"
        title={status.value}
        subTitle="您访问的页面不存在"
        class={styles["main"]}
        v-slots={{
          extra: () => (
            <Button type="primary" onClick={goHome}>
              返回首页
            </Button>
          ),
        }}
      />
    );
  },
});
